<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-image style="width: 200px; height: 200px" src="/file/img?name=images/bg.jpg">
    </el-image>
    <el-divider></el-divider>
    <el-upload
        class="upload-demo"
        action="/file/upload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        list-type="picture"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-divider></el-divider>
    <el-button size="small" type="primary" @click="testGet">Get</el-button>
    <el-button size="small" type="primary" @click="testGetRestful">Get-Restful</el-button>
    <el-button size="small" type="success" @click="testPost">Post</el-button>
    <el-button size="small" type="warning" @click="testPut">Put</el-button>
    <el-button size="small" type="danger" @click="testDelete">Delete</el-button>
    <el-button size="small" type="danger" @click="testDeleteRestful(123)">Delete-Restful</el-button>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.$http
          .delete("/file", {
            params: {
              fileInfo: file.response.data,
            },
          })
          .then(({data: res}) => {
            this.$message({
              message: `${res.data}`,
              type: "success",
            });
          });
    },
    handlePreview(file) {
      console.log(file);
    },

    testGet() {
      this.$http.get('/test/user', {
        params: {username: 'zhangsan', age: 20}
        // 解构赋值
      }).then(({data: res}) => {
        console.log("响应结果：", res)
      }).catch(() => {
      })
    },
    testGetRestful() {
      this.$http.get('/test/user/111').then(({data: res}) => {
        console.log("响应结果：", res)
      }).catch(() => {
      })
    },
    testPost() {
      this.$http.post('/test/user', {username: 'zhangsan', age: 20}).then(({data: res}) => {
        console.log("响应结果：", res)
      }).catch(() => {
      })
    },
    testPut() {
      this.$http.put('/test/user', {username: 'zhangsan', age: 20}).then(({data: res}) => {
        console.log("响应结果：", res)
      }).catch(() => {
      })
    },

    testDelete() {
      this.$http.delete('/test/user', {data: {username: 'zhangsan', age: 20}}).then(({data: res}) => {
        console.log("响应结果：", res)
      }).catch(() => {
      })
    },

    testDeleteRestful(id) {
      this.$http.delete(`/test/user/${id}`).then(({data: res}) => {
        console.log("响应结果：", res)
      }).catch(() => {
      })
    },

  },
};
</script>

<style scoped></style>
